<template>
	<view>
		<view class="all_company">
			<view class="company_box" v-for="(item,index) in hotServices" :key="index" @click="toDetail(item)">
				<image class="img" :src="item.coverImg[0]"></image>
				<view class="company_name">
					<text class="cu" v-if="item.activityFlag == 1">促</text>
					<text class="title">{{item.title}}</text>
				</view>
				<view class="price">
					<text class="pri">￥{{item.price}}</text>
					<text class="zixun">{{item.advisoryNumber}}人咨询</text>
				</view>
			</view>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	import utils from '../../common/utils.js'
	export default {
		data() {
			return {
				hotServices: [], //热门服务列表
				loadMoreText: '加载中',
				showLoadMore: false,
				pageNo: 1,
				type: ''
			}
		},
		onLoad(op) {
			this.type = op.type
			if (op.type == 1) {
				//获取热门服务
				this.getHotServices()
			} else if (op.type == 2) {
				//获取最新活动
				this.getNewActivity()
			}
		},
		onReachBottom() {
			let that = this
			that.showLoadMore = true;
			if (that.type == 1) {
				setTimeout(() => {
					that.getHotServices();
				}, 300);
			} else {
				setTimeout(() => {
					that.getNewActivity();
				}, 300);
			}
		},
		methods: {
			//提示
			showToast(title) {
				uni.showToast({
					title: title,
					icon: "none"
				})
			},
			//获取热门服务
			getHotServices() {
				uni.request({
					url: this.$serverUrl + 'ftService/getPutShelfServicesByType',
					data: {
						"pageNo": this.pageNo,
						"pageSize": 10,
						"popularFlag": 1,
						"serviceCity": getApp().globalData.city
					},
					method: 'POST',
					success: (res) => {
						let data = res.data
						if (data.length == 0) {
							this.loadMoreText = '没有更多了'
						} else {
							this.pageNo += 1
							this.hotServices = this.hotServices.concat(data)
						}
					},
					fail: (e) => {
						this.showToast('热门服务获取失败')
					}
				})
			},
			//获取最新活动
			getNewActivity() {
				uni.request({
					url: this.$serverUrl + 'ftService/getPutShelfServicesByType',
					data: {
						"pageNo": this.pageNo,
						"pageSize": 10,
						"activityFlag": 1,
						"serviceCity": getApp().globalData.city
					},
					method: 'POST',
					success: (res) => {
						let data = res.data
						if (data.length == 0) {
							this.loadMoreText = '没有更多了'
						} else {
							this.pageNo += 1
							this.hotServices = this.hotServices.concat(data)
						}
					},
					fail: (e) => {
						this.showToast('最新活动获取失败')
					}
				})
			},
			//跳转详情页
			toDetail(item) {
				let that = this
				let userInfo = uni.getStorageSync('userInfo')
				if (userInfo != '') {
					uni.request({
						url: that.$serverUrl + 'ftService/addServiceBrowseNumber/' + item.id,
						success: (res) => {

						}
					})
					uni.navigateTo({
						url: '/pages/serve/serviceDetail?op=' + encodeURIComponent(JSON.stringify(item))
					})
				} else {
					uni.getUserProfile({
						desc: 'wexin',
						success: (e) => {
							utils.loginRequest(e.userInfo).then((res) => {
								if (res.success) {
									if (uni.getStorageSync('userInfo') != '') {
										uni.showToast({
											title: '登录成功',
											icon: 'none'
										})
										uni.request({
											url: that.$serverUrl +
												'ftService/addServiceBrowseNumber/' + item.id,
											success: (res) => {

											}
										})
										uni.navigateTo({
											url: '/pages/serve/serviceDetail?op=' +
												encodeURIComponent(JSON.stringify(item))
										})
									}
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
	.uni-loadmore {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding-bottom: 30rpx;
	}

	.all_company {
		margin: 40upx 36upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.company_box {
		width: 330upx;
		margin: 20upx 0;
	}

	.img {
		width: 330upx;
		height: 330upx;
		border-radius: 10upx;
	}

	.cu {
		width: 50upx;
		height: 50upx;
		background-color: #f87935;
		color: #FFFFFF;
		text-align: center;
		line-height: 50upx;
		border-radius: 5upx;
		margin-right: 15upx;
		padding: 5upx;
	}

	.company_name {
		margin-top: 20upx;
		letter-spacing: 5upx;
	}

	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40upx;
	}

	.pri {
		color: #e04141;
		font-size: 34upx;
		font-weight: bold;
	}

	.zixun {
		color: #666666;
		font-size: 24upx;
	}

	.title {
		font-size: 34rpx;
	}
</style>
